<template>
  <div>
    <el-select
      filterable
      multiple
      v-model="selectValue"
      @change="handleChange"
      clearable
      class="mb20 mr20"
      style="width: 40%"
    >
      <el-option
        v-for="(item,index) in selectData"
        :key="index"
        :label="item.moralityItemName"
        :value="item.moralityItemId"
      />
    </el-select>
    <h2 v-if="grade > 0" class="fr" style="margin-right: 80px">考评项目分数：{{ grade }}</h2>
    <el-tooltip
      class="item"
      effect="light"
      content="下拉选择类型后，穿梭框左侧展示相应数据，勾选点击按钮到右侧，点击下一步"
      placement="top"
    >
      <i class="fs16 el-icon-warning-outline"></i>
    </el-tooltip>
    <x-transfer
      @updateData="handleUpdateData"
      @postData="handlePostData"
      :titles="['待选基础项目', '已选基础项目']"
      :from="fromData"
      :to="toData"
      class="mt20"
      ref="xTransfer"
    />
  </div>
</template>

<script>
import XTransfer from '@/components/XTransfer'
import { evalItemGet } from '@/api/eval'
import { getAll, hasChildGetAll } from '@/api/morality'

export default {
  components: {
    XTransfer
  },
  data() {
    return {
      selectValue: null,
      fromData: [],
      toData: [],
      selectData: [],
      value: null,
      saveArr: [],
      type: this.$route.params.type,
      grade: 0
    }
  },
  mounted() {
    hasChildGetAll().then(res => {
      // console.log('res', res.data)
      res.data.map(v => {
        if (v.children.length === 0) {
          v.children.push(v)
        }
      })
      this.selectData = [...res.data]
    })
  },
  methods: {
    handleUpdateData(arr) {
      console.log('监听 arr', arr)

      this.grade = 0
      arr.map(v => {
        this.grade += Number(v.itemStandard)
      })
    },
    // 编辑回显数据
    parSetArr(arr) {
      console.log('回显 arr', arr)

      if (arr.length > 0) {
        this.$nextTick(() => {
          arr.map(v => {
            v.key = v.moralityItemId
            v.label = v.moralityItemName + '-' + v.itemStandard
          })
          this.toData = [...arr]
        })
      }
    },
    // XTransfer 传递出来的数据
    handlePostData(arr) {
      this.toData = [...arr]
    },
    // 下拉框切换 fromData 数据
    // async handleChange(val) {
    //   console.log('val', val)
    //   if (val.length > 0) {
    //     let parentItemId = null
    //     if (val.length > 1) {
    //       parentItemId = val.join(',')
    //     } else {
    //       parentItemId = val.join('')
    //     }

    //     const res = await getAll({ parentItemId })
    //     let arr = res.data
    //     arr.map(v => {
    //       v.key = v.moralityItemId
    //       v.label = v.moralityItemName
    //     })

    //     this.$nextTick(() => {
    //       this.fromData = [...arr]
    //       this.saveArr = [...arr]
    //     })
    //   } else {
    //     this.fromData = []
    //     this.saveArr = []
    //   }
    // },
    async handleChange(val) {
      let arr = []
      if (val.length > 0) {
        this.selectData.map(v => {
          val.map(j => {
            // console.log('v', v)

            if (v.moralityItemId === j) {
              arr = [...arr, ...v.children]
              arr.map(v => {
                v.key = v.moralityItemId
                v.label = v.moralityItemName + '-' + v.itemStandard
              })
              this.$nextTick(() => {
                this.fromData = [...arr]
              })
            }
          })
        })
      } else {
        this.fromData = []
      }
    },
    // 第一步选择模板之后，给到右边的数据
    setArr(arr) {
      if (this.type === 'add') {
        this.toData = [...arr]
      }
    },
    postData() {
      this.$refs.xTransfer.postToData()
      if (this.toData.length > 0) {
        this.$emit('postData', true, this.toData, 2)
        return false
      } else {
        this.$message.error('请至少选择一条')
        this.$emit('notSubmit', 2)
      }
    }
  }
}
</script>
